<template>
  <div class="main">
    <LeftMenu class="leftmenu" :state="state"></LeftMenu>
    <div class="right-content">
      <TopMenu @changeCollapsed="changeCollapsed"></TopMenu>
      <router-view/>
    </div>
  </div>
</template>

<script lang="ts">
import LeftMenu from '../components/LeftMenu.vue'
import TopMenu from '../components/TopMenu.vue'
import { ref, Ref } from 'vue'

export default {
  components: {
    LeftMenu,
    TopMenu
  },
  setup(props, { emit }){
    let state:Ref<boolean> = ref(false)
    
    let changeCollapsed = (e) => {
      state.value = e
    }

    return { state, changeCollapsed }
  }
}
</script>

<style lang="less" scoped>
  .main {
    display: flex;
  }
  .right-content {
    flex: 1;
  }
</style>